/**
 * Created by 刘丹 on 2017/11/1  QQ975148678
 * 原生封装
 * 调用方法为Banner(id) id为轮播在外层ID
 * 只是适用于能兼容CSS3新属性的设备浏览器*/
 function bannerSlide(id) {
    /*id 轮播图大盒子的id*/
    var timer = null;
    var autoMove = null;
    var flag = false;
    function Banner(id) {
        this.dom=document.getElementById(id);
        this.bannercontent = this.dom.querySelector('ul');
        this.bannerimgs= this.bannercontent.querySelectorAll('img');
        this.widths = this.dom.offsetWidth;
        this.ollist = this.dom.querySelector('ol');
        this.lists = this.ollist.children;
        this.len=this.bannerimgs.length;
        this.timer = null;
        this.index = 0;
        this.x=0;
        this.nowx=0;
        this.pointplace=0;
        this.init();
    }
    Banner.prototype={
        constructor:Banner,
        init:function () { //克隆图片及初始化
            this._autoCircle();
            if(this.len<2){
                return;
            }
            this.bannercontent.appendChild(this.bannercontent.children[0].cloneNode(true));
            this.bannercontent.insertBefore(this.bannercontent.children[this.len - 1].cloneNode(true), this.bannercontent.children[0]);
            this.bannercontent.style.transform = "translateX(" + -this.widths + "px)";
            this._autoWidth();
            this._autoScroll();
            this._event();
            this._olEvent();
        },
        _autoCircle:function () { //自动生成列表
            /*  for (var i = 0; i < this.len; i++) {
             var li = document.createElement("li");
             this.ollist.appendChild(li);
             this.lists = this.ollist.children;
             }*/
            this.ollist.children[0].className='hover';
        },
        _autoWidth:function () { /*自动计算并且设置宽度*/
            var self=this;
            var len=this.len+2;
            var bannerli = this.dom.querySelectorAll('ul li');
            this.bannercontent.style.width=this.widths*len+'px';
            for (var i = 0; i < len; i++) {
                var obj = bannerli[i];
                obj.style.width=self.widths+'px';
            }
        },
        _circle:function (n) {
            for (var i = 0; i < this.lists.length; i++) {
                this.lists[i].className='';
            }
            this.lists[n].className='hover';
        },
        _autoScroll:function () {  //自动切换
            var self=this;
            autoMove = function() {
                self.index ++;
                self.pointplace = (self.index+1) * self.widths;
                if (self.index < self.len && self.index >= 0) {
                    self.bannercontent.style.transition = "all 0.3s";
                    self.bannercontent.style.transform = "translateX(" + -self.pointplace + "px)";
                    self._circle(self.index);
                }else{
                    self.bannercontent.style.transition = "none";
                    self.bannercontent.style.transform = "translateX(" + -self.widths+ "px)";
                    self._circle(0);
                    self.index=0;
                }
            };
            flag = true;
            timer = setInterval(autoMove,3000);
        },
        /*栏目点击切换*/
        _olEvent:function () {
            var self = this;
            $(this.ollist).on('mouseenter','li',function () {
                var index = $(this).index();
                self.index = index - 1;
                clearInterval(timer);
                flag = false;
                autoMove();
            });
            $(self.dom).on('mouseleave',function () {
                if(flag){
                    return;
                }
                clearInterval(timer);
                flag = true;
                timer = setInterval(autoMove,3000);
            });
        },
        _event:function () {   //手指滑动切换
            var self=this;
            this.bannercontent.addEventListener('touchstart',function(e){
                clearInterval(timer);
                self.x= e.touches[0].clientX;
            });
            this.bannercontent.addEventListener('touchmove',function(e){
                self.nowx= e.touches[0].clientX;
            });
            this.bannercontent.addEventListener('touchend',function(){
                if(self.nowx-self.x<0){
                    self.next();
                }else {
                    self.prev();
                }
            });
        },
        next:function () {
            clearInterval(timer);
            flag = false;
            autoMove();
        },
        prev:function () {
            var self=this;
            clearInterval(timer);
            flag = false;
            self.index--;
            self.index--;
            autoMove();
        }
    };

    return new Banner(id);
 }


